<template>
  <div>
    <RouteTitle :isBack="true" />
    <a-tabs v-model:activeKey="activeKey" class="tabs" @change="activeChange">
      <a-tab-pane v-for="item in tabList" :tab="item.title" :key="item.key" />
    </a-tabs>
    <a-spin tip="加载中..." :spinning="courseSpin">
      <a-row class="popular-courses" align="middle" :gutter="[16, 16]">
        <a-col :span="3" v-for="item in courseList" :key="item.id">
          <div
            class="badge"
            :style="{
              background:
                item.type == 'advance'
                  ? '#ed755a'
                  : item.type == 'base'
                  ? '#5f85f5'
                  : '8e5cea',
            }"
          >
            {{ item.type_txt }}
          </div>
          <img :src="item.image" class="image" @click="courseClick(item)" />
          <div class="text">
            {{ item.title }}
          </div>
        </a-col>
      </a-row>

      <a-row align="middle" justify="end">
        <a-col>
          <a-pagination
            v-model:current="page"
            show-quick-jumper
            :total="total"
            :pageSize="pageSize"
            @change="onChange"
          />
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import CreateFixed from "../components/CreateFixed/index.vue";
import request from "../../../common/utils/request";

export default {
  name: "LearningCenter",
  components: {},
  setup() {
    const state = reactive({
      count: 0,
      activeKey: 1,
      tabList: [],
      courseList: [],
      courseSpin: false,
      page: 1,
      pageSize: 20,
      total: 0,
    });

    const onChange = (page, pageSize) => {
      state.page = page;
      state.pageSize = pageSize;
      getCourseList();
    };

    // 热门课程
    const getCourseList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
        type: state.activeKey,
      };
      state.courseSpin = true;
      request
        .get("/work_ai", "/user/shotstack/course/list", params)
        .then((res) => {
          state.courseList = res.result.data;
          state.total = res.result.total;
          state.courseSpin = false;
        })
        .catch(() => {
          state.courseSpin = false;
        });
    };

    // 课程详情
    const courseClick = (data) => {
      if (data.content_type == 1) {
		  if(!data.content) return
        window.open(data.content);
      }
      if (data.content_type == 0) {
        window.open(
          `${window.location.origin}/custom/textPreview?id=${data.id}&type=course`
        );
      }
    };

    // 课程筛选
    const activeChange = (key) => {
      state.page = 1;
      state.pageSize = 20;
      getCourseList();
    };

    // 课程分类
    const gettypeList = () => {
      request
        .get("/work_ai", "/user/shotstack/course/type/list")
        .then((res) => {
          let list = [];
          for (let key in res.result) {
            let newObj = {};
            newObj["title"] = res.result[key];
            newObj["key"] = key;
            list.push(newObj);
          }
          state.tabList = list;
          state.activeKey = list[0].key;
          getCourseList();
        });
    };

    onMounted(() => {
      gettypeList();
    });

    return {
      ...toRefs(state),
      onChange,
      courseClick,
      activeChange,
    };
  },
};
</script>

<style lang="less" scoped>
.tabs {
  margin-top: 5px;
}
.popular-courses {
  margin-top: 10px;
  position: relative;
  .image {
    width: 100%;
    height: 285px;
    border-radius: 16px;
    cursor: pointer;
	object-fit: cover;
	object-position: center;
  }
  .text {
    margin-top: 5px;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
  }

  .badge {
    position: absolute;
    top: 0;
    right: 8px;
    width: 90px;
    height: 32px;
    background: rgb(255, 101, 98);
    // background: rgb(66, 156, 255);
    // background: linear-gradient(
    //   298deg,
    //   rgb(111, 84, 226) 0%,
    //   rgb(168, 100, 255) 100%
    // );
    color: #fff;
    border-radius: 0 16px;
    padding: 5px 20px;
    font-weight: 500;
    font-size: 12px;
  }
}
:deep(.ss-tabs-top > .ss-tabs-nav) {
  margin: 0;
}
</style>
